<template>
  <div class="page-wrapper tone">
    <h2 class="page-title">供应商信息</h2>
    <Form ref="formInline" :model="formData" :rules="formRules" label-width="100" inline class='ttwo'>
        <div>
          <FormItem prop="name" label="供应商名称：" class="itemWidth">
              <Input :disabled="reviewMode" type="text" v-model="formData.name" />
          </FormItem>
          <FormItem label="合作状态：" class="itemWidth">
              <RadioGroup  v-model="formData.enable">
                  <Radio :disabled="reviewMode" :label="0">未合作</Radio>
                  <Radio :disabled="reviewMode" :label="1">合作中</Radio>
              </RadioGroup>
          </FormItem>
        </div>
        <div>
          <FormItem
            prop="hosAddr"
            :rules="genAddressRule(formData)"
            label="签约方地址："
            class="itemWidth2"
          >
            <div class='tthree'>
              <newfourLevelLinkage
                :disabled="reviewMode"
                :province="formData.provinceCode"
                :city="formData.cityCode"
                :area="formData.districtCode"
                @changeProvince="(val) => changeProvince(val)"
                @changeCity="(val) => changeCity(val)"
                @changeArea="(val) => changeArea(val)"
                ref="fourLevelLinkage"
              />
              <Input
                :disabled="reviewMode"
                class='tfour'
                placeholder="请输入详细地址"
                v-model="formData.hosAddr"
              />
            </div>
          </FormItem>
        </div>
        <div>
          <FormItem prop="linkman" label="联系人：" class="itemWidth">
              <Input type="text" :disabled="reviewMode" v-model="formData.linkman" />
          </FormItem>
          <FormItem prop="linkmanTelephone" label="联系电话：" class="itemWidth">
              <Input type="number" onkeyup="value=value.replace(/[^0-9]/g+(+),'')"onpaste="value=value.replace(/[^0-9]/g+(+),'')" :disabled="reviewMode" v-model="formData.linkmanTelephone" />
          </FormItem>
        </div>
        <div>
          <FormItem label="开户行：" class="itemWidth">
              <Input type="text" :disabled="reviewMode" v-model="formData.openingBank" />
          </FormItem>
          <FormItem label="银行账号：" class="itemWidth">
              <Input type="text" :disabled="reviewMode" v-model="formData.openingAccount" />
          </FormItem>
        </div>
        <div>
          <FormItem label="法人代表：" class="itemWidth">
              <Input type="text" :disabled="reviewMode" v-model="formData.legalPerson" />
          </FormItem>
          <FormItem label="税号：" class="itemWidth">
              <Input type="text" :disabled="reviewMode" v-model="formData.taxNumbe" />
          </FormItem>
        </div>
        <div>
           <FormItem label="经营范围：" class="itemWidth2">
              <Input type="textarea" :disabled="reviewMode" v-model="formData.businessScope" />
          </FormItem>
        </div>
        <div>
           <FormItem label="备注：" class="itemWidth2">
              <Input type="textarea" :disabled="reviewMode" v-model="formData.remark" />
          </FormItem>
        </div>
    </Form>
    <div class="btn-group">
      <Button type="primary" class="btn-left" v-if="!reviewMode" @click="handleSave">保存</Button>
      <Button class="btn-right" @click="handleBack">取消</Button>
    </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
export default {
  components: {
    newfourLevelLinkage
  },
  props: {
    mode: String
  },
  data() {
    return {
      formData: {
        name: null, // 供应商名称
        enable: 0, // 合作状态
        provinceCode: null,
        cityCode: null,
        districtCode: null,
        hosAddr: null,
        linkman: null, // 联系人
        linkmanTelephone: null, // 联系电话
        openingBank: null, // 开户行
        openingAccount: null, // 银行账号
        legalPerson: null, // 法人代表
        taxNumbe: null, // 税号
        businessScope: null, // 经营范围
        remark: null, // 备注

      },
      formRules: {
        name: [ { required: true, message: '供应商名称不能为空', trigger: 'change' } ],
        linkman: [ { required: true, message: '联系人不能为空', trigger: 'change' } ],
        linkmanTelephone: [ { required: true, message: '联系电话不能为空', trigger: 'change' } ]
      }
    }
  },
  mounted() {
    if (this.mode !== 'add') {
      this.findPurchaseSupplierById();
    }
  },
  computed: {
    reviewMode() {
      return this.mode === 'review';
    }
  },
  methods: {
    genAddressRule(formData) {
      return {
        required: true,
        trigger: "change",
        validator: (rule, value, callback) => {
          if (!formData.provinceCode) {
            callback(new Error("请选择省份"));
          } else if (!formData.cityCode) {
            callback(new Error("请选择市"));
          } else if (!formData.districtCode) {
            callback(new Error("请选择区"));
          } else if (!formData.hosAddr) {
            callback(new Error("请填写详细地址"));
          } else {
            callback();
          }
        }
      };
    },
    changeProvince(val) {
      this.formData.provinceCode = val;
    },
    changeCity(val) {
      this.formData.cityCode = val;
    },
    changeArea(val) {
      this.formData.districtCode = val;
    },
    handleBack() {
      const { pagination, filterObj } = this.$route.query;
      this.$router.push({
        path: '/index/drugfirmsmanage/procurement/supplier/list',
        query: {
          pagination,
          filterObj
        }
      })
    },
    handleSave() {
      this.$refs['formInline'].validate((valid) => {
          if (valid) {
            console.log(this.formData);
            this.savePurchaseSupplier();
          }
      })
    },
    savePurchaseSupplier() {
      const reqBody = { ...this.formData };
      this.mode === 'edit' && (reqBody.id = this.$route.params.id);
      this.$axios.post(api.newOrUpdatePurchaseSupplier, reqBody).then(res => {
          if (res.data.code === 1) {
              this.mode === 'edit' && this.$Message.success('修改成功');
              this.mode === 'add' && this.$Message.success('添加成功');
              this.handleBack();
          } else {
              this.$Message.error(res.data.message);
          }
          this.loading = false;
      }).catch(() => {});
    },
    findPurchaseSupplierById() {
      console.log(this.$route.params.id);
      this.$axios.post(api.getPurchaseSupplierInfoById, { id: this.$route.params.id }).then(res => {
          if (res.data.code === 1) {
              this.formData = res.data.object;
          } else {
              this.$Message.error(res.data.message);
          }
          this.loading = false;
      }).catch(() => {});
    }
  }
}
</script>

<style scoped lang="less">
.tone{padding-top: 20px;}
.ttwo{margin-left:110px;}
.tthree{display: flex; alignItems: center; whiteSpace: no-wrap}
.tfour{flex: 1 1 auto; width: auto; marginLeft: 20px}
.page-title {
    color: #02A198;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
}
.itemWidth {
  width: 50%;
  max-width: 400px;
}
.itemWidth2 {
  width: 100%;
  max-width: 800px;
}
.ivu-form-item {
  margin-right: 0px;
}
.btn-group {
  text-align: center;
  width: 75%;
  .btn-left {
    width: 100px;
    margin-right: 10px;
  }
  .btn-right {
    margin: 20px;
    width: 100px;
    margin-left: 10px;
  }
}
</style>